<template>
  <div class="callus">
    <header-item></header-item>
    <title-item :title="title" :title2="title1"></title-item>
    <div class="bigbox">
      <div class="map">
        <map-item></map-item>
      </div>
      <div class="position">
        <h4>全球位置</h4>
        <div class="posibox">
          <div class="posison" v-for="(item,i) in 8" :key="i">
            <h5>总公司</h5>
            <div class="positext">
              <p>384 Maple Circle</p>
              <p>Simi Valley Navada 47489</p>
            </div>
            <div class="positext2">
              <p>T(100) 200 3000</p>
              <p>M.(100) 200 3000</p>
              <p>F.(100) 200 3000</p>
              <p style="color: #788BB8;">example@yahoo.com</p>
            </div>
          </div>
        </div>
      </div>
      <div class="back">
        <h4>向我们发送您的反馈</h4>
        <form-item></form-item>
      </div>
    </div>
    <footer-item></footer-item>
  </div>
</template>

<script setup>
import { ref } from "vue";
import FooterItem from "../components/FooterItem.vue";
import HeaderItem from "../components/HeaderItem.vue";
import TitleItem from "../components/TitleItem.vue";
import FormItem from "../components/FormItem.vue";
import MapItem from "../components/MapItem.vue";

const title = ref("联系");
const title1 = ref("家/联系");
</script>


<style>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.bigbox{
  width: 65%;
  margin: auto;
  padding: 144px 0 100px 0;
}
.map{
  width: 100%;
  height: 400px;
}
/* 全球位置 */
.position{
  width: 100%;
}
.posibox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 36px;
}
.posison{
  width: 24%;
  margin-top: 60px;
}
.positext{
  margin-top: 30px;
  margin-bottom: 30px;
}
.positext2{
  line-height: 25px;
}
.back{
  margin-top: 120px;
}
/* 全球位置 */

/* 响应768px */
@media screen and (max-width:768px) {
  .bigbox{
    width: 100%;
  }
  .posison{
    width: 47%;
  }
}

/* 响应370px */
@media screen and (max-width:370px) {
  .bigbox{
    width: 100%;
  }
  .posison{
    width: 47%;
    font-size: 12px;
  }
}
</style>
